<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>css3 Transitions和伪元素鼠标hover效果  | Demo 4</title>
		<meta name="description" content="Examples of Pseudo-Elements Animations and Transitions" />
		<meta name="keywords" content="pseudo-elements, before, after, animation, transition, css3" />
		<meta name="author" content="Marco Barria for Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/style4.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>css3 Transitions和伪元素鼠标hover效果 <span>Creature: Animation &amp; Transition of :before and :after</span></h1>	
				<nav class="codrops-demos">
					<a href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a class="current-demo" href="index4.html">Demo 4</a>
				</nav>
			</header>
			<div class="main clearfix">
				<div class="pojoro">&#9679;</div>
			</div>
			<p class="support"><em>Hover me!</em></p>
			<p class="support">请使用支持伪元素的浏览器观看!</p>
		</div><!-- /container -->
	</body>
</html>